<template>
  <div>
<!--    <div class="table-page-search-wrapper">-->
<!--      <a-form-model :model="queryParam" layout="inline">-->
<!--        <a-row :gutter="10">-->
<!--          <a-col :md="6" :sm="24">-->
<!--            <a-form-model-item label="入库时间">-->
<!--              <a-range-picker @change="onChange" />-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
<!--          <a-col :md="6" :sm="24">-->
<!--              <span class="table-page-search-submitButtons">-->
<!--                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>-->
<!--              </span>-->
<!--          </a-col>-->
<!--        </a-row>-->
<!--      </a-form-model>-->
<!--    </div>-->
<!--    <div class="table-page-search-wrapper">-->
<!--      <a-form-model :model="queryParam" layout="inline">-->
<!--        <a-row :gutter="48">-->
<!--          <a-col :md="6" :sm="24">-->
<!--            <a-form-model-item label="商标名称">-->
<!--              <a-input v-model="queryParam.id" placeholder="输入商标名称"/>-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
<!--          <a-col :md="6" :sm="24">-->
<!--            <a-form-model-item label="客户姓名">-->
<!--              <a-input v-model="queryParam.phone" placeholder="输入客户姓名"/>-->
<!--            </a-form-model-item>-->
<!--          </a-col>-->
<!--          <template v-if="advanced">-->
<!--            <a-col :md="6" :sm="24">-->
<!--              <a-form-item label="领取时间">-->
<!--                <a-date-picker style="width: 100%"/>-->
<!--              </a-form-item>-->
<!--            </a-col>-->
<!--            <a-col :md="6" :sm="24">-->
<!--              <a-form-item label="所属顾问">-->
<!--                <a-select v-model="queryParam['filter[username]']">-->
<!--                  <a-select-option v-for="(item,index) in adviserOpts" :key="index" :value="index">{{ item }}-->
<!--                  </a-select-option>-->
<!--                </a-select>-->
<!--              </a-form-item>-->
<!--            </a-col>-->
<!--          </template>-->
<!--          <a-col :md="!advanced && 8 || 24" :sm="24">-->
<!--              <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">-->
<!--                <a-button type="primary">查询</a-button>-->
<!--                <a-button style="margin-left: 8px" @click="() => this.queryParam = {}">重置</a-button>-->
<!--                <a @click="toggleAdvanced" style="margin-left: 8px">-->
<!--                  {{ advanced ? '收起' : '展开' }}-->
<!--                  <a-icon :type="advanced ? 'up' : 'down'"/>-->
<!--                </a>-->
<!--              </span>-->
<!--          </a-col>-->
<!--        </a-row>-->
<!--      </a-form-model>-->
<!--    </div>-->
    <a-button size="small" style="margin-right:5px" type="danger" @click="onAppoint('1', [])">全部转移</a-button>
    <a-button size="small" :disabled="selectedRowKeys.length == 0" style="margin-right:5px" type="danger" @click="onAppoint('2', selectedRowKeys)">批量指派</a-button>
    <a-button size="small" :disabled="selectedRowKeys.length == 0" type="danger" @click="batchLock(selectedRowKeys)">批量锁定</a-button>
    <p></p>
    <s-table
      bordered
      ref="table"
      :row-key="(record) => record.customer_id"
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="customerColumns"
      :data="customerData"
    >
      <div
        slot="filterSelect"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
        style="padding: 8px"
      >
        <a-select
          show-search
          style="width: 188px; margin-bottom: 8px; display: block;"
          :placeholder="`选择${column.title}`"
          :value="selectedKeys[0]"
          :filter-option="filterOption"
          @change="(value) => setSelectedKeys(value ? [value] : [])"
          @pressEnter="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
        >
<<<<<<< HEAD
          <a-select-option v-for="(item,index) in adviserOpts" :key="index" :value="index">{{item}}</a-select-option>
=======
          <a-select-option v-for="(item,index) in sourceOpts" :key="item" :value="index">{{item}}</a-select-option>
>>>>>>> 197221765592d24d8dbb345cb8fe20d9fd73ce20
        </a-select>
        <a-button
          type="primary"
          icon="search"
          size="small"
          style="width: 90px; margin-right: 8px"
          @click="() => handleSelect(selectedKeys, confirm, column.dataIndex)"
        >
          搜索
        </a-button>
        <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
          重置
        </a-button>
      </div>
      <div
        slot="filterDropdown"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
        style="padding: 8px"
      >
        <a-input
          v-ant-ref="c => (searchInput = c)"
          :placeholder="`搜索${column.title}`"
          :value="selectedKeys[0]"
          style="width: 188px; margin-bottom: 8px; display: block;"
          @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
          @pressEnter="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
        />
        <a-button
          type="primary"
          icon="search"
          size="small"
          style="width: 90px; margin-right: 8px"
          @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
        >
          搜索
        </a-button>
        <a-button size="small" style="width: 90px" @click="() => handleReset(clearFilters, column.dataIndex)">
          重置
        </a-button>
      </div>
      <div
        slot="filterRange"
        slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
        style="padding: 8px"
      >
        <a-range-picker
          style="width: 228px; margin-bottom: 8px; display: block;"
          :value="createValue"
          @change="onChange"
        />
        <a-button
          type="primary"
          icon="search"
          size="small"
          style="width: 110px; margin-right: 8px"
          @click="() => handleRange(selectedKeys, confirm, column.dataIndex)"
        >
          搜索
        </a-button>
        <a-button size="small" style="width: 110px" @click="() => rangeReset(clearFilters)">
          重置
        </a-button>
      </div>
      <template slot="first_type" slot-scope="text">
        <span v-if="text != ''">{{typeOpts[text]}}</span>
        <span v-else>驳回资源</span>
      </template>
      <template slot="tm_name" slot-scope="text,record">
        {{text}}{{record.pt_name}}
      </template>
      <template slot="phone" slot-scope="text,record">
        <a-tooltip placement="topLeft" :title="record.all_phone">
          <a-button class="copy" :data-clipboard-text="record.all_phone" size="small" @click="copy">{{text}}</a-button>
        </a-tooltip>
      </template>
      <template slot="action" slot-scope="text,record">
        <a-button size="small" type="primary" style="margin-right:5px" @click="toDetail(record.customer_id)">详情</a-button>
        <a-button size="small" type="danger" style="margin-right:5px" @click="onAppoint('2', record.customer_id)">指派</a-button>
        <a-button size="small" type="default" @click="onLock(record.customer_id)" :disabled="record.is_lock != 0">锁定</a-button>
      </template>
    </s-table>
    <a-modal
      title="指派数据"
      v-model="visible"
      :width="500"
      :confirm-loading="loading"
      @ok="submitAppoint"
    >
        <a-alert
          message="此操作不可逆"
          description="转移包含：客户、业务、合同"
          type="error"
          show-icon
        />
        <p></p>
        <a-select
          show-search
          v-model="transferForm['to']"
          :filter-option="filterOption"
          style="width: 100%"
          placeholder="请选择数据要指派给谁"
        >
          <a-select-option v-for="(item,index) in userOpts" :key="index" :value="index">{{item}}</a-select-option>
        </a-select>
    </a-modal>
  </div>
</template>

<script>
import { STable } from '@/components'
import col from '@/columns/customer'
import { getAppoint, getReceiveList, postAppoint, lockCustomer } from '@/api/customer'
import Clipboard from 'clipboard'
const customerColumns = col.unreceive

export default {
  components: {
    STable
  },
  name: 'UnReceive',
  data () {
    return {
      customerColumns,
      customerData: parameters => {
        return getReceiveList(Object.assign(parameters, this.queryParam)).then(res => {
          this.sourceOpts = res.result.source_opts
          this.typeOpts = res.result.first_type_opts
          return res.result
        })
      },
      queryParam: {},
      advanced: false,
      createValue: [],
      typeOpts: {},
      transferForm: {},
      visible: false,
      id: '',
      selectedRowKeys: [],
      userOpts: {},
      sourceOpts: {},
      loading: false,
      type: '1',
      searchInput: null
    }
  },
  created () {
    this.queryParam['filter[category]'] = '30'
  },
  methods: {
    onChange (date, dateString) {
      this.createValue = date
      this.queryParam['filter[begin_created_at]'] = dateString[0]
      this.queryParam['filter[end_created_at]'] = dateString[1]
    },
    handleSelect (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
      this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
    },
    handleSearch (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
      this.queryParam['filter[' + dataIndex + ']'] = selectedKeys[0]
    },
    handleReset (clearFilters, dataIndex) {
      clearFilters()
      delete this.queryParam['filter[' + dataIndex + ']']
    },
    handleRange (selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
      this.$refs.table.refresh(true)
    },
    rangeReset (clearFilters) {
      clearFilters()
      this.createValue = []
      delete this.queryParam['filter[begin_created_at]']
      delete this.queryParam['filter[end_created_at]']
      this.$refs.table.refresh(true)
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    toDetail (id) {
      this.$router.push({ name: 'CustomerDetail', params: { id } })
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    onAppoint (type, id) {
      this.transferForm = {}
      this.type = type
      getAppoint().then(res => {
        if (res.status === 0) {
          this.id = id
          this.userOpts = res.result.to_user_opts
          this.visible = true
        } else {
          this.$warning({
            title: res.msg
          })
        }
      })
    },
    submitAppoint () {
      const app = this
      const data = {}
      const arr = []
      app.loading = true
      data['to_uid'] = app.transferForm.to
      if (this.type === '2') {
        if (app.selectedRowKeys.length === 0) {
          arr[0] = app.id
          data['cids'] = arr
        } else {
          data['cids'] = app.selectedRowKeys
        }
        postAppoint(data, '').then(res => {
          if (res.status === 0) {
            app.loading = false
            app.selectedRowKeys = []
            app.$refs.table.refresh()
            app.visible = false
          } else {
            app.$warning({
              title: res.msg
            })
          }
        })
      } else if (this.type === '1') {
        data['cids'] = []
        postAppoint(data, this.type).then(res => {
          app.loading = false
          app.$refs.table.refresh()
          app.visible = false
        })
      }
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    copy () {
      const clipboard = new Clipboard('.copy')
      clipboard.on('success', e => {
        this.$message.success('复制成功')
        clipboard.off('error')
        clipboard.off('success')
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        this.$message.error('复制失败')
        clipboard.off('error')
        clipboard.off('success')
        clipboard.destroy()
      })
    },
    onLock (id) {
      const app = this
      const data = {}
      const ids = []
      ids[0] = id
      data['cids[]'] = ids[0]
      lockCustomer(data).then(res => {
        app.$refs.table.refresh(true)
      })
    },
    batchLock (ids) {
      const app = this
      const data = {}
      data['cids'] = ids
      lockCustomer(data).then(res => {
        app.$refs.table.refresh()
      })
    }
  }
}
</script>

<style scoped>

</style>
